<template>
  <div class="reportIndex">
    <div class="reportIndex_title">请选择查看的BI大屏</div>
    <div class="reportIndex_module">
      <div v-for="(item, index) in module" :key="index" class="reportIndex_module_item" @click="goToUrl(item.url)">
        <img :src="item.img">
        <div>{{ item.title }}</div>
        <div class="desc">{{ item.desc }}</div>
      </div>
    </div>
  </div>
</template>
<script>

export default {
  data() {
    return {
      module: [
        { img: require("@/assets/report/module_1.png"), title: '人资与履约', desc: 'HR and Contract Performance', url: '/HRAndContract' },
        { img: require("@/assets/report/module_2.png"), title: '资产与物资', desc: 'Assets & Materials', url: '/assetsAndMaterials' },
        { img: require("@/assets/report/module_3.png"), title: '信息与处置', desc: 'Information and Disposal' },
        { img: require("@/assets/report/module_4.png"), title: '成本与支付', desc: 'Costs and Payments', url: '/costsAndPayments' },
        { img: require("@/assets/report/module_4.png"), title: '销售', desc: 'Costs and Payments', url: '/sales' },

      ]
    }
  },
  methods: {
    goToUrl(url) {
      // this.$router.push({ path: url, })
      const routeUrl = this.$router.resolve({
        path: url,
      })
      window.open(routeUrl.href, '_blank')
    }
  }
}
</script>
<style lang="scss" scoped>
.reportIndex {
  min-height: calc(100vh - 84px);
  background-color: #F2F4FC;
  background-image: url('~@/assets/images/bgBI.png');
  background-size: 100% 100%;

  .reportIndex_title {
    font-size: 36px;
    font-weight: bold;
    color: #333;
    text-align: center;
    line-height: 218px;
  }

  .reportIndex_module {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    margin: 4% 5%;
    color: #0050FA;
    font-size: 28px;
    line-height: 39px;
    text-align: center;

    .reportIndex_module_item {
      border-radius: 12px;
      background: linear-gradient(180deg, rgba(244, 248, 255, 1) 0%, rgba(255, 255, 255, 1) 70%);
      box-shadow: 0px 2px 10px 0px rgba(189, 180, 180, 0.4);
      border: 1px solid rgba(255, 255, 255, 1);
      padding: 53px 60px;
      cursor: pointer;
    }

    .desc {
      color: #999;
      font-size: 14px;
    }
  }
}
</style>
